<template>
	<view>
		<z-paging :fixed="true" ref="paging" v-model="dataList" @query="queryList">
			<view class="top-box" slot="top">
				<!-- 类别 -->
				<view class="content-box">
					<view class="content-text">类别</view>
					<view class="content-list">
						<view :class="['content-item', {'active-item': type === tItem.type}]"
							v-for="(tItem, tIndex) in typeList" :key="tIndex"
							@click="typeClick(tItem.type)"
						>{{tItem.name}}</view>
					</view>
				</view>
				<!-- 阶段 -->
				<view class="content-box">
					<view class="content-text">阶段</view>
					<view class="content-list">
						<view :class="['content-item', {'active-item': stage === sItem.stage}]" 
							v-for="(sItem, sIndex) in stageList" :key="sIndex"
							@click="stageClick(sItem.stage)"
						>{{sItem.name}}</view>
					</view>
				</view>
			</view>
			<!-- 课程 -->
			<view class="course-list">
				<view class="course-box word-box-hover" v-for="(item, index) in dataList" :key="index">
					<image :src="item.curriculum_image"></image>
					<view class="course-info">
						<view class="title">{{item.curriculum_title}}</view>
						<view class="desc ellipsis-1-lines">{{item.curriculum_subtitle}}</view>
						<view class="course-study">
							<view class="text-record">{{item.study_total_num}}人在学习</view>
							<view class="study-btn" @click="goPage('/pages/curriculum/detail?id='+item.curriculum_id)">开始学习</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'all',
				typeList: [],
				stage: 'all',
				stageList: [],
				dataList: [],
			};
		},
		onLoad() {
			this.getParameter()
		},
		methods:{
			getParameter() {
				this.$u.post(this.$u.api.curriculumParameter, {}).then((res) => {
					this.typeList = res.data.type
					this.stageList = res.data.stage
				}).catch((err) => {
					uni.showToast({
						title: err.data.msg,
						icon: 'none'
					})
				})
			},
			typeClick(type) {
				this.type = type
				this.$refs.paging.reload()
			},
			stageClick(stage) {
				this.stage = stage
				this.$refs.paging.reload()
			},
			queryList(pageNo, pageSize) {
				this.$u.post(this.$u.api.curriculumList, {
					pageNo: pageNo,
					pageSize: pageSize,
					type: this.type,
					stage: this.stage,
				}).then((res) => {
					if (res.code == 1) {
						this.$refs.paging.complete(res.data.data)
					} else {
						this.$refs.paging.complete(false)
					}
				}).catch((err) => {
					this.$refs.paging.complete(false)
				})
			},
			goPage(page) {
				uni.navigateTo({
					url: page
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	page{
		background: #EEFAFF;
	}
	.top-box{
		padding: 16rpx 0 14rpx;
		
		.content-box{
			padding: 0 30rpx;
			display: flex;
			align-content: flex-start;
			
			.content-text{
				font-size: 28rpx;
				// width: 60rpx;
			}
			
			.content-list{
				display: flex;
				flex-wrap: wrap;
				margin-left: 30rpx;
				flex: 1;
				.content-item{
					width: 116rpx;
					height: 48rpx;
					margin-bottom: 16rpx;
					margin-right: 20rpx;
					border-radius: 24rpx;
					border: 1rpx solid #4BB0FF;
					box-sizing: border-box;
					font-size: 26rpx;
					text-align: center;
					line-height: 46rpx;
					&:nth-child(4n+4){
						margin-right: 0;
					}
				}
				
				.active-item{
					color: #fff;
					background-color: #4BB0FF;
				}
				
			}
			
		}
	}
	
	.course-list{
		padding: 0 30rpx;
		
		.course-box{
			border-radius:10rpx ;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 26rpx 20rpx;
			margin-bottom: 20rpx;
			image{
				display: block;
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
			
			.course-info{
				width: calc(100% - 170rpx);
				margin-left: 20rpx;
				box-sizing: border-box;
				.title{
					font-weight: bold;
					font-size: 30rpx;
					margin-bottom: 20rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.desc{
					width: 100%;
					font-size: 26rpx;
					color: #666666;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					margin-bottom: 20rpx;
				}
				.course-study{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.text-record{
						font-size: 26rpx;
						color: #999999;
					}
					.study-btn{
						width: 150rpx;
						height: 60rpx;
						background: rgba(75,176,255,0.1);
						border-radius: 30px ;
						text-align: center;
						line-height: 60rpx;
						font-size: 26rpx;
						color: #4BB0FF;
					}
					
				}
				
			}
			
		}
		
	}

</style>
